<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轻语</title>
		<style>
			body {
				width: 300px;
				height: 500px;
				text-align: center;
				font-size: 15px;
			}
			.message-history-header{
				width: 100%;
				height: 20px;
				font-size: 15px;
				font-weight: bold;
				padding: 3px 0 3px 0;
			}
			#message-history-container {
				height: 400px;
				border: 1px solid rgba(100,100,100,0.2);
				overflow-y: scroll;
				padding: 5px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				
			}

			#message-input {
				width: 100%;
				padding: 3px 10px 3px 10px;
				border: none;
			}
			#message-input:focus {
			  border-color: rgba(50, 50, 50, 0.25); /* 获得焦点时的边框颜色 */
			  box-shadow: 0 0 0 0.2rem rgba(50, 50, 50, 0.1); /* 获得焦点时的阴影效果 */
			}

			#message-input-container {
				display: flex;
				height: 50px;
				flex-direction: row;
				border: 1px solid rgba(100,100,100,0.2);
			}
			
			.message-history-other{
				width: 100%;
				
				display: flex;
				flex-direction: row;
				margin-bottom: 5px;
				justify-content: flex-start;
			}
			.message-history-self{
				width: 100%;
				
				display: flex;
				flex-direction: row;
				margin-bottom: 5px;
				justify-content: flex-end;
			}
			

			.message-history-content {
				width: 100%;
				box-sizing: border-box;
				height: auto;
				border: 1px solid #ccc;
				text-align: left;
				align-items: flex-start;
				padding: 5px 10px  5px 10px;
				overflow-wrap: break-word;
				word-wrap: break-word;
				word-break: break-all;
				background-color: rgba(123,125,222,0.5);
				color: #fff;
				border-radius: 5px;

			}
			
			.message-history-user-avatar{
				margin: 2px 5px 2px 5px;
			}
			.message-history-user-avatar img{
				width: 30px;
				height: 30px;
				object-fit: scale-down;
				border-radius: 0px;
			}
			
			
			.message-history-image{
				max-width: 90%;
				min-width: 10%;
				height: auto;
				object-fit: scale-down;
			}
			
			
			.message-send {
				width: 50px;
				font-size: 13px;
				background-color: transparent;
				border: none;
			}
			.message-send:hover {
			  background-color: rgba(255, 255, 255, 1); /* 鼠标悬停时显示半透明的背景颜色 */
			}
			button:active {
			  background-color: rgba(255, 255, 255, 0.2); /* 按下按钮时显示更明显的半透明背景颜色 */
			}
			
			::-webkit-scrollbar {
			    width: 5px;
			    height: 5px;
			}
			 
			::-webkit-scrollbar-thumb {
			    border-radius: 5px;
			    background-color: rgba(100,100,100,0.2);
			}
			 
			::-webkit-scrollbar-track {
			    border-radius: 1px;
			    background-color: rgba(100,100,100,0.2);
			}
			
		</style>
	</head>
	<body>
		<div class="message-history-header">能力支撑组</div>
		<div id="message-history-container">
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/zhaolun.jpg"/></div><div class="message-history-content">这个数字云是在平台正常认证新加的吗</div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/zhaolun.jpg"/></div><div class="message-history-content"><img class="message-history-image" src="./images/1.png"/></div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/yuming.jpg"/></div><div class="message-history-content">好像不是</div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/yuming.jpg"/></div><div class="message-history-content">我没录 不知道别人咋回事</div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/zhaolun.jpg"/></div><div class="message-history-content">这个数字云没有产业链导致运营中心这边报错  咱们正常认证流程没改加产业链吗？</div></div>
			<div class="message-history-self"><div class="message-history-content">晚上吃完饭，看看进展</div><div class="message-history-user-avatar"><img src="./images/photo.jpg"/></div></div>
			
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/zhaolun.jpg"/></div><div class="message-history-content">这个数字云是在平台正常认证新加的吗</div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/zhaolun.jpg"/></div><div class="message-history-content"><img class="message-history-image" src="./images/1.png"/></div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/yuming.jpg"/></div><div class="message-history-content">好像不是</div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/yuming.jpg"/></div><div class="message-history-content">我没录 不知道别人咋回事</div></div>
			<div class="message-history-other"><div class="message-history-user-avatar"> <img  src="./images/zhaolun.jpg"/></div><div class="message-history-content">这个数字云没有产业链导致运营中心这边报错  咱们正常认证流程没改加产业链吗？</div></div>
			<div class="message-history-self"><div class="message-history-content">晚上吃完饭，看看进展</div><div class="message-history-user-avatar"><img src="./images/photo.jpg"/></div></div>
			
			
		</div>
		<div id="message-input-container"><input type="text" id="message-input" placeholder="说点啥..." />
			<button class="message-send">发送</button>
		</div>

		<script src="./js/popup.js"></script>
	</body>
</html>
